<template>
  <div class="pro-detail flex">
    <div class="detail-img">
      <img :src="proInfo.imgAltas[currentImg].src | srcFormat" alt="" />
      <ul class="pro-img flex">
        <li
          v-for="(item, index) in proInfo.imgAltas"
          :key="item.src"
          @mouseenter="currentImg = index"
        >
          <img :src="item.src | srcFormat" alt="" />
          <div class="item-img" v-show="currentImg !== index"></div>
        </li>
      </ul>
    </div>
    <div class="detail">
      <div class="tit">
        <h2>{{ proInfo.seriesTitle }}</h2>
        <p>{{ proInfo.seriesSubTitle }}</p>
        <p class="socre">
          <span class="jifen">{{ proInfo.coin }}</span>
          <img src="../../assets/images/home/monad.png" alt="" />
        </p>
      </div>
      <div class="choose">
        <p class="color">选择{{ proInfo.parameterJson[0].title }}</p>

        <div class="cho-btn flex">
          <div
            :class="{ active: $route.query.id == item.id }"
            class="choose-btn"
            v-for="item in proInfo.parameters"
            :key="item.id"
            @click="colorItem(item)"
          >
            {{ item.title }}
          </div>
        </div>
        <p class="num">
          数量 <span class="stock">*礼品库存{{ proInfo.stock }}件</span>
        </p>

        <div class="num-btn flex">
          <div class="reduce" @click="reduce()">-</div>
          <input class="numc" type="text" v-model="num" />
          <div class="add" @click="add()">+</div>
        </div>

        <div class="cart-btn flex">
          <div class="cart" @click="addCart()">加入购物车</div>
          <div class="duihuan">立即兑换</div>
        </div>
        <div class="icon">
          <span>
            <img src="../../assets/images/details/like-click.png" alt="" />
            <span
              >喜欢<span class="count">{{ proInfo.like }}</span></span
            >
          </span>
          <span> </span>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
import { toast } from "../../utils/toast";
import {AddCartApi} from "../../http/api"
export default {
  props: ["proInfo"],
  data() {
    return {
      num: 1,
      currentImg: 0,
      stock: 0,
    };
  },
  created() {
    if (this.$route.query.id) {
      localStorage.setItem("detailId", this.$route.query.id);
    }
  },
  methods: {
    addCart() {
      if(!this.$store.state.userinfo.nickName){
        this.$store.state.isShowLogin=true;
        return toast("请先登录","warning")
        }
        AddCartApi({
          productId:this.$route.query.id,
          total:this.num
        }).then(res=>{
          if(res.code===0){
            this.$store.commit('updateTopHeadKey')
            // this.$store.state.topHeadKey++;
            toast("成功加入购物车","success")
          }
        })
    },
    colorItem(item) {
      if(this.$route.query.id==item.id) return
      this.$router.push(this.$route.path + "?id=" + item.id);

    },
    reduce() {
      if (this.num == 1) return toast("数量不能少于1件", "warning");
      this.num--;
    },
    add() {
      if (this.num >= this.proInfo.stock)
        return toast("库存数不够啦", "warning");
      this.num++;
    },
  },
};
</script>
 
<style lang = "less" scoped>
.pro-detail {
  margin-top: 20px;
  .detail-img {
    img {
      width: 459px;
      height: 440px;
    }
    .pro-img {
      justify-content: space-between;
      margin-top: 20px;
      li {
        width: 100px;
        height: 100px;
        cursor: pointer;
        position: relative;
        img {
          width: 100%;
          height: 100%;
        }
        .item-img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100px;
          height: 100px;
          background-color: rgba(255, 255, 255, 0.7);
        }
      }
    }
  }
  .detail {
    width: 480px;
    margin-left: 30px;
    .tit {
      width: 430px;
      line-height: 23px;
      margin-bottom: 20px;
      border-bottom: 1px solid #ccc;
      h2 {
        height: 27px;
        font-size: 28px;
        font-weight: 400;
        margin: 16px 0;
      }
      p {
        font-size: 14px;
        font-weight: 300;
        color: #999;
        img {
          width: 26px;
          height: 26px;
          padding-left: 10px;
        }
      }
      .socre {
        padding: 20px 0;
      }
      .jifen {
        font-size: 28px;
        font-weight: bold;
        color: #fd604d;
      }
    }
    .choose {
      p {
        line-height: 40px;
      }
      .cho-btn {
        flex-wrap: wrap;
        .choose-btn {
          padding: 14px 20px;
          border: 1px solid #d1d1d1;
          color: #666;
          text-align: center;
          margin-right: 20px;
          margin-bottom: 10px;
          cursor: pointer;
          &.active {
            border: 1px solid #0a328e;
            color: #0a328e;
          }
        }
      }
      .stock {
        color: #666;
        font-size: 14px;
      }
      .color {
        color: #000;
      }
      .num {
        margin-top: 10px;
        color: #000;
      }
      .num-btn {
        height: 32px;
        color: #666;
        user-select: none;
        .reduce,
        .add {
          width: 30px;
          cursor: pointer;
          text-align: center;
          line-height: 32px;
          border: 1px solid #d1d1d1;
        }
        .numc {
          outline: none;
          width: 46px;
          border: 1px solid #d1d1d1;
          border-left: 0;
          border-right: 0;
          text-align: center;
        }
      }
      .cart-btn {
        margin-top: 24px;
        color: #fff;
        user-select: none;
        div {
          width: 150px;
          height: 46px;
          text-align: center;
          line-height: 46px;
          cursor: pointer;
        }
        .cart {
          background: #3dc36b;
          margin-right: 20px;
        }
        .duihuan {
          background: #fd604d;
        }
      }
      .icon {
        margin-top: 25px;
        color: #666;
        img {
          width: 26px;
          height: 23px;
          vertical-align: middle;
        }
        span {
          padding: 0 10px;
        }
      }
    }
  }
}
</style>